<template functional>
  <div class="folder-explorer-item">
    <div class="folder-content hoverable" @click="listeners.select()">
      <common-icon type="management-folder" :size="32" class="folder-icon" />
      <div class="folder-name">
        <div>{{ props.folder.name }}</div>
        <!-- <div>{{ JSON.stringify(props.folder,null,2) }}</div> -->
      </div>
    </div>
    <div class="folder-extras" v-if="props.folder.meta">
      <ActionButton
        v-if="props.folder.meta.qdp"
        @click="listeners.management(folder)"
        icon="management-drxx02"
        :size="32"
        class="folder-icon"
      />
    </div>
  </div>
</template>

<script>
export default {
  props: {
    folder: {
      type: Object,
      required: true,
    },
  },
};
</script>

<style lang="less" scoped>
.folder-explorer-item {
  display: flex;
  position: relative;

  .folder-content {
    display: flex;
    flex: 1;
    padding: 16px;
    align-items: center;
    user-select: none;
    cursor: pointer;
    position: relative;
  }

  .folder-extras {
    display: flex;
    align-items: center;

    .action {
      padding: 16px;
    }
    .action:not(:hover) {
      background-color: transparent;
    }
  }

  .folder-icon {
    margin: 0 4px;
  }

  .folder-name {
    flex: 100% 1 1;
    margin-left: 16px;
  }
}
</style>
